<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Translation</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
        }

        .loading {
            display: flex;
            flex-direction: column;
            position: fixed;
            padding: 1%;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: #fafafa;
            overflow: auto;
        }

        .loading > .logo {
            margin: auto auto 0;
            width: 96px;
            height: 96px;
            position: relative;
        }

        .loading > .logo > svg {
            width: 100%;
            height: 100%;
            z-index: 3;
            position: relative;
        }

        .loading > .logo > .bg {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            overflow: hidden;
        }

        .loading > .logo > .bg.shader {
            z-index: -1;
            filter: blur(15px);
        }

        .loading > .logo > .bg::before {
            width: 100%;
            height: 100%;
            display: block;
            content: '';
            transform: scale(3);
            animation: rotate 5s linear infinite, move 12s linear infinite;
            background-image: url("");
            background-size: cover;
        }

        @keyframes rotate {
            0% {
                transform: scale(3) rotate(0deg);
            }
            100% {
                transform: scale(3) rotate(360deg);
            }
        }

        @keyframes move {
            0% {
                transform-origin: 30% 30%;
            }
            25% {
                transform-origin: 30% 65%;
            }
            50% {
                transform-origin: 65% 30%;
            }
            75% {
                transform-origin: 65% 65%;
            }
            100% {
                transform-origin: 30% 30%;
            }
        }

        .loading .content {
            margin: 30px auto auto;
            text-align: center;
            font-size: 26px;
            color: #333;
        }

        .loading .content .links {
            margin-top: 30px;
            font-size: 18px;
            color: #555;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading .content .links a {
            color: #555;
            text-decoration: none;
            margin-left: 15px;
        }

        .loading .content .links a svg {
            width: 32px;
            height: 32px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="logo">
        <div class="bg shader"></div>
        <div class="bg"></div>
        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <defs>
                <linearGradient id="bg" x1="-0.473" y1="16.473" x2="14.871" y2="1.129"
                                gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
                    <stop offset="0.17" stop-color="#07c3f2"/>
                    <stop offset="0.97" stop-color="#087cfa"/>
                </linearGradient>
            </defs>
            <path fill="url(#bg)"
                  d="M0,0V16H16V0ZM5.835,9.224l-.113-.113s-.828.564-1.2.79a14.393,14.393,0,0,1-2.259,1.243l-.9-1.506A13.033,13.033,0,0,0,4.367,8.282l.188-.113-.113-.15A6.147,6.147,0,0,1,3.388,6.362c-.113-.226-.188-.489-.3-.753H4.631c.037.113.113.226.15.339a6.379,6.379,0,0,0,.791,1.167l.113.151L5.8,7.115a4.907,4.907,0,0,0,.79-1.167A5.2,5.2,0,0,0,7.04,4.593l.038-.3H1.431V2.861H5.007V1.129H6.438V2.861h3.576V4.292H8.659l-.038.339a6.877,6.877,0,0,1-.527,1.731A8.722,8.722,0,0,1,7.04,8.019l-.113.15.3.189c.414.226.828.489,1.318.753l-.715,1.43A13,13,0,0,1,5.835,9.224Zm7.454,4.705-.828-2.258H9.675l-.828,2.258H7.04l3.2-7.9H11.9l3.2,7.905Zm-2.221-5.91.9,2.3H10.165Z"/>
        </svg>
    </div>
    <div class="content">
        <span id="loading-text">Loading...</span>
        <div class="links">
            <span>Open in browser: </span>
            <a id="github" href="https://yiiguxing.github.io/TranslationPlugin/" title="GitHub" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill="#333"
                          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
                </svg>
            </a>
            <a id="cloudflare" href="https://yiiguxing.gitee.io/translation-plugin/" title="Cloudflare" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
                    <path fill="#FBAD41"
                          d="M47.927,28.225c-0.2,0-0.397,0.007-0.594,0.014c-0.032,0.002-0.064,0.009-0.094,0.022 c-0.105,0.035-0.186,0.121-0.214,0.229l-0.846,2.924c-0.365,1.257-0.23,2.418,0.383,3.27c0.563,0.789,1.498,1.251,2.634,1.305 l4.589,0.276c0.131,0.004,0.252,0.071,0.326,0.179c0.076,0.116,0.093,0.26,0.046,0.39c-0.076,0.215-0.271,0.365-0.498,0.384 l-4.768,0.276c-2.59,0.118-5.377,2.21-6.355,4.761l-0.344,0.9c-0.05,0.131,0.016,0.277,0.146,0.327 c0.025,0.01,0.052,0.015,0.079,0.016H58.84c0.195,0.002,0.368-0.127,0.422-0.315c0.292-1.036,0.439-2.108,0.437-3.185 c0-6.5-5.266-11.766-11.764-11.766"/>
                    <path fill="#F6821F"
                          d="M40.76,43.12l0.304-1.057c0.365-1.258,0.229-2.418-0.384-3.271c-0.562-0.788-1.497-1.25-2.633-1.304 L16.52,37.212c-0.136-0.002-0.262-0.069-0.34-0.18c-0.076-0.115-0.093-0.26-0.047-0.39c0.077-0.215,0.274-0.365,0.502-0.383 l21.727-0.276c2.58-0.118,5.367-2.21,6.345-4.761l1.24-3.24c0.05-0.138,0.062-0.286,0.035-0.43 c-1.41-6.319-7.057-11.052-13.81-11.052c-6.223,0-11.503,4.016-13.399,9.598c-1.28-0.961-2.875-1.402-4.467-1.236 c-3.498,0.36-6.042,3.487-5.682,6.985c0.032,0.312,0.087,0.621,0.165,0.925C3.913,32.917,0,36.912,0,41.82 c0,0.445,0.032,0.882,0.097,1.308c0.028,0.208,0.205,0.362,0.415,0.362h39.756c0.229-0.003,0.429-0.156,0.491-0.376"/>
                </svg>
            </a>
            <a id="gitee" href="https://yiiguxing.gitee.io/translation-plugin/" title="Gitee" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <circle cx="16" cy="16" fill="#c71d23" r="16"/>
                    <path fill="#fff"
                          d="m24.0987698 14.2225144h-9.0863697c-.4362899.000207-.7900048.3538292-.790326.7901191l-.0005173 1.9752185c-.0003277.4363707.353328.7902117.7896987.790326.0000712 0 .0001424 0 .0002135-.0002135l5.5317648-.0000461c.4363708-.0000102.7901221.3537352.7901257.790106 0 .0000022 0 .0000044-.0000066.0000066v.1975077.1975318c0 1.3091122-1.0612451 2.3703573-2.3703573 2.3703573h-7.5067195c-.4363081-.0000218-.790009-.353713-.7900429-.7900211l-.0002069-7.5059917c-.0001014-1.3091122 1.0611145-2.3703865 2.3702267-2.3704226.0000217 0 .0000435 0 .0000653.0000653h11.0602463c.4361793-.0004902.7898484-.35394.7906091-.79011894l.0012251-1.97521881c.0007606-.43637034-.3527683-.79033806-.7891389-.79060871-.0001634-.0000001-.0003268-.00000015-.0004901.00048976h-11.0617654c-3.27278051 0-5.92589329 2.65311278-5.92589329 5.9258933v11.0612755c0 .4363707.35374837.7901191.7901191.7901191h11.65447149c2.9454379 0 5.3331872-2.3877493 5.3331872-5.3331872v-4.5430682c0-.4363707-.3537484-.7901191-.7901191-.7901191z"/>
                </svg>
            </a>
        </div>
    </div>
</div>
<script>
    // Here will be matched and replaced, DO NOT MODIFY!!!
    // Config Start
    const config = {
        fragment: "",
        intellijPlatform: "",
        dark: false,
    };
    // Config End

    const DELAY = 1000;
    const START_AT = Date.now();
    const URLS = {
        github: "https://yiiguxing.github.io/TranslationPlugin",
        cloudflare: "https://translation-plugin.pages.dev",
        gitee: "https://yiiguxing.gitee.io/translation-plugin"
    }
    const state = {
        isDode: false,
        failCount: 0,
    };

    function onDode(url) {
        if (state.isDode) return;

        state.isDode = true;
        setTimeout(() => {
            window.location.replace(url);
        }, Math.max(0, DELAY - (Date.now() - START_AT)));
    }

    function onFail() {
        if (state.isDode) return;

        state.failCount++;
        if (state.failCount >= Object.keys(URLS).length) {
            document.querySelector('#loading-text').innerText = 'Failed to load the page.';
        }
    }

    function getTargetUrl(baseURL) {
        const parameters = [];
        if (config.intellijPlatform) {
            parameters.push(`intellij=${config.intellijPlatform}`);
        }
        if (config.dark) {
            parameters.push('dark=true');
        }
        const query = parameters.length > 0 ? `?${parameters.join('&')}` : '';
        return `${baseURL}/${query}${config.fragment}`
    }

    function test(baseURL) {
        fetch(`${baseURL}/`).then(() => onDode(getTargetUrl(baseURL)), onFail);
    }

    function updateLink(id, url) {
        const a = document.querySelector(`#${id}`);
        if (a) {
            a.href = url
        }
    }

    (function () {
        const fragment = config.fragment.replace('&compact=true', '');
        for (const key in URLS) {
            updateLink(key, `${URLS[key]}/${fragment}`);
        }
        for (const url of Object.values(URLS)) {
            test(url);
        }
    })();
</script>
</body>
</html>